<template>
  <div>
    <draggable v-model="list" element="ul">
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </draggable>
    {{ list }}
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'Demo',
  components: {
    draggable
  },
  data() {
    return {
      list: [
        {
          id: 1,
          name: 'a'
        },
        {
          id: 2,
          name: 'b'
        },
        {
          id: 3,
          name: 'c'
        },
        {
          id: 4,
          name: 'd'
        },
        {
          id: 5,
          name: 'e'
        },
        {
          id: 6,
          name: 'f'
        }
      ]
    }
  }
}
</script>

<style scoped>
li {
  display: block;
  margin: 15px 0;
  cursor: pointer;
  border: 1px solid #5bc0de;
  width: 100px;
  text-align: center;
  height: 30px;
  line-height: 30px;
}
</style>
